
<template>
	<div class="showSlider" ref="showslider">
		<p class="back_box">
			<Back @back="back" :showText="showText"></Back>
		</p>
		<p class="edit_riqi" @click="editriqi">
			<i class="iconfont icon-riqi"></i>
			<span class="edit_text">写日记</span>
		</p>
		<p class="edit_back" @click="editback">
			<i class="iconfont icon-back"></i>
			<span class="edit_text">返回</span>
		</p>
	</div>
</template>

<script>
// eslint-disable-next-line
/* eslint-disable */
import Back from "./back.vue"
export default {
	name: 'showslider',
	props: {
		showText: {
			type: Boolean,
			default: true
		}
	},
	components: {
		Back,
	},
	data() {
		return {

		}
	},
	methods: {
		back() {
			this.$emit("back")
		},
		editriqi() {
			this.$emit("editriqi")
		},
		editback() {
			this.$emit('editback')
		}
	}
}
</script>

<style scoped lang="scss">
// eslint-disable-next-line
/* eslint-disable */
@import "../../public/sass/var.scss";
.showSlider{
	position: fixed;
	left: -65%;
	width: 65%;
	height: 100%;
	z-index: 1000;
	overflow: hidden;
	background-color: #fff;
	.back_box{
		position: relative;
    	height: 4%;
    	padding: 11px 0 17px 0;
    	background-color: #666;
    	border-bottom: 1px solid #fff;
	}
	.edit_riqi{
		position: relative;
    	height: 4%;
    	background-color: #666;
    	padding: 15px 0px 14px 10px;
    	border-bottom: 1px solid #fff;

    	.icon-riqi{
    		vertical-align:middle;
			color: $btnbackgroundcolor;
			font-size: $account;
    	}
    	.edit_text{
			color: #fff;
			font-size: 16px;
			margin-left: 5px;
    	}
    	.icon-back{
			vertical-align:middle;
			color: $btnbackgroundcolor;
			font-size: $account;
    	}
	}
	.edit_back{
		position: relative;
    	height: 4%;
    	background-color: #666;
    	padding: 15px 0px 14px 10px;
    	border-bottom: 1px solid #fff;
    	.edit_text{
			color: #fff;
			font-size: 16px;
			margin-left: 5px;
			vertical-align:middle;
    	}
    	.icon-back{
			vertical-align:middle;
			color: $btnbackgroundcolor;
			font-size: $account;
    	}
	}
}
</style>